*{margin:0;padding:0;font:14px HelveticaNeue-Light,Sans-serif;-webkit-touch-callout:none;-webkit-user-select:none}
a{text-decoration:none;color:#000}
article{position:absolute;display:block;width:748px;height:748px;top:128px}
article div{position:relative;width:561px;height:748px;text-align:center;margin:auto;overflow:hidden}
article img{position:relative;width:561px;height:748px;display:block;background:#eee}
body{width:748px;height:1004px;margin:auto}
h1{font-size:24px;margin-top:12px}
header,nav{position:absolute;display:table;width:748px;height:100px}
header dd,nav dd{text-align:center}
header div,nav div{display:table-cell;text-align:center;vertical-align:middle}
header dl,nav dl{display:inline-block;width:100px}
header img{width:31px}
nav{top:904px}
nav img{width:39px}

.s1{top:-748px}
.s2{top:-1496px}
.s3{top:-2244px;-webkit-transform:translateX(-561px)}
.s4{top:-2992px;-webkit-transform:translateX(-561px)}
.m2{top:-1496px;-webkit-transform:translateX(-561px)}
.m3{top:-2244px}

#out{-webkit-transform:rotate(270deg)}